<template>
  <div class="q-pa-md q-gutter-sm">
    <t-btn label="Small" color="primary" @click="small = true" />
    <t-btn label="Medium" color="primary" @click="medium = true" />
    <t-btn label="Full Width" color="primary" @click="fullWidth = true" />
    <t-btn label="Full Height" color="primary" @click="fullHeight = true" />

    <t-dialog v-model="small">
      <t-card style="width: 300px">
        <t-card-section>
          <div class="text-h6">Small</div>
        </t-card-section>

        <t-card-section class="q-pt-none">
          Click/Tap on the backdrop.
        </t-card-section>

        <t-card-actions align="right" class="bg-white text-teal">
          <t-btn flat label="OK" v-close-popup />
        </t-card-actions>
      </t-card>
    </t-dialog>

    <t-dialog v-model="medium">
      <t-card style="width: 700px; max-width: 80vw">
        <t-card-section>
          <div class="text-h6">Medium</div>
        </t-card-section>

        <t-card-section class="q-pt-none">
          Click/Tap on the backdrop.
        </t-card-section>

        <t-card-actions align="right" class="bg-white text-teal">
          <t-btn flat label="OK" v-close-popup />
        </t-card-actions>
      </t-card>
    </t-dialog>

    <t-dialog v-model="fullWidth" full-width>
      <t-card>
        <t-card-section>
          <div class="text-h6">Full Width</div>
        </t-card-section>

        <t-card-section class="q-pt-none">
          Click/Tap on the backdrop.
        </t-card-section>

        <t-card-actions align="right" class="bg-white text-teal">
          <t-btn flat label="OK" v-close-popup />
        </t-card-actions>
      </t-card>
    </t-dialog>

    <t-dialog v-model="fullHeight" full-height>
      <t-card class="column full-height" style="width: 300px">
        <t-card-section>
          <div class="text-h6">Full Height</div>
        </t-card-section>

        <t-card-section class="col q-pt-none">
          Click/Tap on the backdrop.
        </t-card-section>

        <t-card-actions align="right" class="bg-white text-teal">
          <t-btn flat label="OK" v-close-popup />
        </t-card-actions>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        small: ref(false),
        medium: ref(false),
        fullWidth: ref(false),
        fullHeight: ref(false),
      };
    },
  };
</script>
